<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="日期">
        <el-col :span="10">
          <el-date-picker
            :format="startDate + ' 至 ' + endDate"
            v-model="form.createTime"
            type="week"
            :picker-options="{'firstDayOfWeek': 1}"
            @change="newDateWeekHandle"
            :placeholder="startDate+' 至 '+endDate" style="width: 530px">
          </el-date-picker>
        </el-col>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <span v-if="bclassList.length<=0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >班级课表录入</el-button>
          </span>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleUpdates"
        >修改班级课表录入</el-button>
      </el-col>
    </el-row>

    <el-divider content-position="left">个人课表</el-divider>
    <!--    //显示课表-->
    <div v-if="selectKeBiao">
      <el-table :data="bclassList"  border :stripe="true" class="curriculumTable"
                v-loading="detailLoading" >
        <el-table-column prop="sessionsId" label="节次" width="100" height="50" align="center"> </el-table-column>

        <el-table-column  :label='this.Monday!=null?"星期一"+this.Monday:"星期一"'   align="center" style="line-height: 26px;">
          <template slot-scope="scope">
              <span>
                  {{scope.row.mondayName}}
              </span>
            <span v-if="scope.row.mondayName==null">
              未排课
            </span>
            <p v-for="m in MiaoShu">
              <span v-if="scope.row.mondaySubjectId==m.classId  ">
                  <span v-if="scope.row.sessionsId==m.sessionsId">
                     <span v-if="MiaoShu!=null && Monday==m.modeTime">
                     {{m.introduce}}
                      </span>
                </span>
              </span>
            </p>
            <p>
              <el-link icon="el-icon-edit" @click="openDialog(scope.row.mondaySubjectId,scope.row.sessionsId,Monday)">添加备注</el-link>
            </p>
          </template>

        </el-table-column>
        <el-table-column  :label='this.Tuesday!=null?"星期二"+this.Tuesday:"星期二"'  align="center">
          <template slot-scope="scope">
              <span>
                  {{scope.row.tuesdayName}}
              </span>
              <span v-if="scope.row.tuesdayName==null">
              未排课
              </span>
            <p v-for="m in MiaoShu">
              <span v-if="scope.row.tuesdaySubjectId==m.classId  ">
                  <span v-if="scope.row.sessionsId==m.sessionsId">
                     <span v-if="Tuesday!=null && Tuesday==m.modeTime">
                     {{m.introduce}}
                   </span>
                </span>
              </span>
            </p>
            <p>
              <el-link icon="el-icon-edit" @click="openDialog(scope.row.tuesdaySubjectId,scope.row.sessionsId,Tuesday)">添加备注</el-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column  :label='this.Wednesday !=null?"星期三"+this.Wednesday :"星期三"'  align="center">
          <template slot-scope="scope">
              <span>
                  {{scope.row.wednesdayName}}
              </span>
            <span v-if="scope.row.wednesdayName==null">
              未排课
              </span>
            <p v-for="m in MiaoShu">
              <span v-if="scope.row.wednesdaySubjectId==m.classId  ">
                  <span v-if="scope.row.sessionsId==m.sessionsId">
                     <span v-if="Wednesday!=null &&Wednesday==m.modeTime">
                     {{m.introduce}}
                     </span>
                </span>
              </span>
            </p>
            <p>
              <el-link icon="el-icon-edit" @click="openDialog(scope.row.wednesdaySubjectId,scope.row.sessionsId,Wednesday)">添加备注</el-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column  :label='this.Thursday !=null?"星期四"+this.Thursday :"星期四"'  align="center">
          <template slot-scope="scope">
              <span>
                  {{scope.row.thursdayName}}
              </span>
            <span v-if="scope.row.thursdayName==null">
              未排课
              </span>
            <p v-for="m in MiaoShu">
              <span v-if="scope.row.thursdaySubjectId==m.classId  ">
                  <span v-if="scope.row.sessionsId==m.sessionsId">
                     <span v-if="Thursday!=null && Thursday==m.modeTime">
                     {{m.introduce}}
                     </span>
                </span>
              </span>
            </p>
            <p>
              <el-link icon="el-icon-edit" @click="openDialog(scope.row.thursdaySubjectId,scope.row.sessionsId,Thursday)">添加备注</el-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column  :label='this.Friday !=null?"星期五"+this.Friday :"星期五"'  align="center">
          <template slot-scope="scope">
              <span>
                  {{scope.row.fridayName}}
              </span>
            <span v-if="scope.row.fridayName==null">
              未排课
              </span>
            <p v-for="m in MiaoShu">
              <span v-if="scope.row.fridaySubjectId==m.classId  ">
                  <span v-if="scope.row.sessionsId==m.sessionsId">
                     <span v-if="Friday!=null && Friday==m.modeTime">
                     {{m.introduce}}
                      </span>
                </span>
              </span>
            </p>
            <p>
              <el-link icon="el-icon-edit" @click="openDialog(scope.row.fridaySubjectId,scope.row.sessionsId,Friday)">添加备注</el-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column  :label='this.Saturday !=null?"星期六"+this.Saturday :"星期六"'  align="center">
          <template slot-scope="scope">
              <span>
                  {{scope.row.saturdayName}}
              </span>
            <span v-if="scope.row.saturdayName==null">
              未排课
              </span>
            <p v-for="m in MiaoShu">
              <span v-if="scope.row.saturdaySubjectId==m.classId  ">
                  <span v-if="scope.row.sessionsId==m.sessionsId">
                     <span v-if="Saturday!=null && Saturday==m.modeTime">
                     {{m.introduce}}
                      </span>
                </span>
              </span>
            </p>
            <p>
              <el-link icon="el-icon-edit" @click="openDialog(scope.row.saturdaySubjectId,scope.row.sessionsId,Saturday)">添加备注</el-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column  :label='this.Sunday !=null?"星期日"+this.Sunday :"星期日"'  align="center">
          <template slot-scope="scope">
              <span>
                  {{scope.row.sundayName}}
              </span>
            <span v-if="scope.row.sundayName==null">
              未排课
              </span>
            <p v-for="m in MiaoShu">
              <span v-if="scope.row.sundaySubjectId==m.classId  ">
                  <span v-if="scope.row.sessionsId==m.sessionsId">
                     <span v-if="Sunday!=null && Sunday==m.modeTime">
                     {{m.introduce}}
                    </span>
                </span>
              </span>
            </p>
            <p>
              <el-link icon="el-icon-edit" @click="openDialog(scope.row.sundaySubjectId,scope.row.sessionsId,Sunday)">添加备注</el-link>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    添加OR修改描述-->
    <div>
      <el-dialog title="描述" :visible="dialogVisible" width="30%" >
        <span v-if="Miao==null">
          <el-input v-model="input" placeholder="" ></el-input>
        </span>
        <span v-if="Miao!=null">
               <el-input v-model="input" :placeholder="Miao.introduce" ></el-input>
        </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMiao()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--    添加或就改班级-->
    <div v-if="handleUpdate">
      <div>
        <el-table :data="bclassLists"  border :stripe="true" class="curriculumTable">
          <el-table-column prop="sessionsId" label="节次" width="100" height="50" align="center"> </el-table-column>
          <el-table-column  :label='this.Monday!=null?"星期一"+this.Monday:"星期一"'   align="center" style="line-height: 26px;">
            <editable-cell :show-input="row.className" slot-scope="{row}"  :rowData="row" :selectDataList="sclassList"
                           v-model="row.mondaySubjectId" :addDesc="true">
              <span slot="content">{{getSubjectLabel(row.mondaySubjectId) || '未排课'}}</span>
            </editable-cell>
          </el-table-column>
          <el-table-column  :label='this.Tuesday!=null?"星期二"+this.Tuesday:"星期二"'  align="center">
            <editable-cell :show-input="row.className" slot-scope="{row}" :selectDataList="sclassList"  :rowData="row"
                           v-model="row.tuesdaySubjectId" :addDesc="true">
              <span slot="content">{{getSubjectLabel(row.tuesdaySubjectId) || '未排课'}}</span>
            </editable-cell>
          </el-table-column>
          <el-table-column  :label='this.Wednesday !=null?"星期三"+this.Wednesday :"星期三"'  align="center">
            <editable-cell :show-input="row.className" slot-scope="{row}" :selectDataList="sclassList" :rowData="row"
                           v-model="row.wednesdaySubjectId" :addDesc="true">
              <span slot="content">{{getSubjectLabel(row.wednesdaySubjectId) || '未排课'}}</span>
            </editable-cell>
          </el-table-column>
          <el-table-column  :label='this.Thursday !=null?"星期四"+this.Thursday :"星期四"'  align="center">
            <editable-cell :show-input="row.className" slot-scope="{row}" :selectDataList="sclassList" :rowData="row"
                           v-model="row.thursdaySubjectId" :addDesc="true">
              <span slot="content">{{getSubjectLabel(row.thursdaySubjectId) || '未排课'}}</span>
            </editable-cell>
          </el-table-column>
          <el-table-column  :label='this.Friday !=null?"星期五"+this.Friday :"星期五"'  align="center">
            <editable-cell :show-input="row.className" slot-scope="{row}" :selectDataList="sclassList" :rowData="row"
                           v-model="row.fridaySubjectId" :addDesc="true">
              <span slot="content">{{getSubjectLabel(row.fridaySubjectId) || '未排课'}}</span>
            </editable-cell>
          </el-table-column>
          <el-table-column  :label='this.Saturday !=null?"星期六"+this.Saturday :"星期六"'  align="center">
            <editable-cell :show-input="row.className" slot-scope="{row}" :selectDataList="sclassList" :rowData="row"
                           v-model="row.saturdaySubjectId" :addDesc="true">
              <span slot="content">{{getSubjectLabel(row.saturdaySubjectId) || '未排课'}}</span>
            </editable-cell>
          </el-table-column>
          <el-table-column  :label='this.Sunday !=null?"星期日"+this.Sunday :"星期日"'  align="center">
            <editable-cell :show-input="row.className" slot-scope="{row}" :selectDataList="sclassList" :rowData="row"
                           v-model="row.sundaySubjectId" :addDesc="true">
              <span slot="content">{{getSubjectLabel(row.sundaySubjectId) || '未排课'}}</span>
            </editable-cell>
          </el-table-column>
        </el-table>

      </div>
      <div slot="footer" class="dialog-footer" v-if="handleUpdate" >
        <el-button type="primary" @click="submitForms">确 定</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" v-if="selectKeBiao">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel()">取 消</el-button>
    </div>
    <!--    //提示-->
    <el-dialog :visible.sync="dialogVisibler"  title="提示"  width="20%">
      <!-- 弹框内容 -->
      <p align="center" style="font-size: 20px">请选择日期!</p>
      <!-- 弹框底部按钮 -->
      <span class="dialog-footer" >
        <el-button @click="dialogVisibler = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { findUsers ,schoolClassList,addOrUpdateUser,findListMiaosu,findMiaosu,addMiaoshu} from "@/api/classManage/courseUser";
  import { sessionsList} from "@/api/baseData/sectiontimemanagement";
  import EditableCell from "@/views/classManage/courseUser/EditableCells";
  import { getToken } from '@/utils/auth'


  export default {
    name: "BClass",
    components: {
      EditableCell
    },
    data() {
      return {
        input: '',
        Miao: {
          introduce: null
        },
        curriculumMiaosu:{
          sessionsId: null,
          classId: null,
          modeTime: null,
          introduce:null
        },
        MiaoShu:[],
        selectKeBiao:true,
        Monday:null,
        Tuesday:null,
        Wednesday:null,
        Thursday :null,
        Friday :null,
        Saturday :null,
        Sunday :null,
        middleDays:[],
        startDate:null,
        endDate:null,
        dialogVisibler:false,
        dialogVisible:false, //控制对话框显示
        handleUpdate:false,
        testdialogVisible: false,
        exportLoading:false,
        detailLoading:false,
        // 遮罩层
        loading: true,
        // 选中数组
        rowList: [],
        // 字典表格数据
        bclassList: [],
        bclassLists:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          createTime:undefined,
          status: undefined,
          classDept:undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        curriculumData:[],
        termTimeList:[],
        studentLoading:false,
        studentDialogVisible:false,
        safeclassList:[],
        subjList:[],
        importVisible:false,
        upload:{
          url:process.env.VUE_APP_BASE_API + '/classInfo/importData',
          headers: {Authorization:"Bearer " + getToken()},
        },
        fileList:[],
        importLoading:false,
        currRow:null,
        //个人班级课表
        sclassList:[]
      };
    },
    created() {
      //查询所有描述
      this.getClassLabel();
      this.getfindMiaoShu();
      this.getDateWeek();
      //查询个人课表信息
      this.getList();
      //获取当前这一个星期
      this.updateWeekRange();
    },
    cancel() {
      this.selectKeBiao=true;
      this.handleUpdate=false;
      this.reset();
    },
    methods: {
      handleCurrentChange(currentRow) {
        this.currRow = currentRow
      },
      //清空表单所有数据
      getSessionsList() {
        this.bclassLists = []
        sessionsList({pageSize: 20, pageNum: 1}).then(resp => {
          resp.data.list.forEach(item => {
            this.bclassLists.push({
              sessionsId: item.coseCode,
              mondaySubjectId: null,
              tuesdaySubjectId: null,
              wednesdaySubjectId: null,
              thursdaySubjectId: null,
              fridaySubjectId: null,
              saturdaySubjectId: null,
              sundaySubjectId: null
            })
          })
          // this.curriculumData = resp.data.list
        })
      },
      /** 查询个人班级列表 */
      getList() {
        this.loading = true;
        findUsers(this.queryParams).then(response => {
            this.bclassList = response.data;
            this.bclassLists = response.data;
            this.loading = false;
          }
        );
      },
      //查询
      onSubmit() {
        findUsers(this.form).then(response => {
            this.bclassList = response.data;
          }
        );
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.selectKeBiao = false;
        this.handleUpdate = true;
        this.sclassList
        this.getSessionsList()
      },
      /**修改课表*/
      handleUpdates() {
        this.getClassLabel();
        this.selectKeBiao = false;
        this.handleUpdate = true;
      },
      // 取消按钮
      cancel() {
        this.selectKeBiao = true;
        this.handleUpdate = false;
        this.getList();
      },
      //查询班级
      getClassLabel() {
        this.loading = true;
        schoolClassList().then(response => {
            this.sclassList = response.data;
          }
        );
      },
      /**获取班级名*/
      getSubjectLabel(val) {
        let name = null
        this.sclassList.forEach(item => {
          if (item.id == val) {
            name = item.className
          }
        })
        return name
      },
      //修改班级
      submitForms() {
        console.log(this.bclassLists);
        addOrUpdateUser(this.bclassLists).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.selectKeBiao = true;
            this.handleUpdate = false;
            this.getList();
          } else {
            this.msgError(response.message);
          }
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.queryParams = {
          className: undefined,
          status: undefined,
          classSubject: undefined,
          pageSize: 10,
          pageNum: 1
        }
        this.resetForm("queryForm");
        this.handleQuery();
      },
      //新增OR修改
      submitForm() {
        addOrUpdateUser(this.bclassList).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          } else {
            this.msgError(response.message);
          }
        });
      },
      //设计选择一个星期
      newDateWeekHandle() {
        const now = new Date(this.form.createTime);
        const nowTime = now.getTime();
        const day = now.getDay();
        const oneDayTime = 24 * 60 * 60 * 1000;
        const mondayTime = nowTime - (day - 1) * oneDayTime;
        const sundayTime = nowTime + (7 - day) * oneDayTime;
        this.startDate = this.$moment(mondayTime).format('YYYY-MM-DD');
        this.endDate = this.$moment(sundayTime).format('YYYY-MM-DD');
        //拆分
        const startDate = new Date(this.startDate);
        const endDate = new Date(this.endDate);
        // 计算两个日期之间的毫秒差
        const timeDiff = endDate.getTime() - startDate.getTime();
        // 将毫秒差转换为天数
        const daysDiff = timeDiff / (1000 * 3600 * 24);
        this.middleDays = [];
        // 循环计算每一天的日期
        for (let i = 0; i <= daysDiff; i++) {
          //要把这个日期显示在星期上
          const currentDate = new Date(startDate.getTime() + i * 24 * 3600 * 1000);
          const formattedDate = currentDate.toISOString().split('T')[0];
          const dateObject = new Date(formattedDate);
          // 获取月份和日期
          const month = dateObject.getMonth() + 1; // 月份是从0开始计数，所以要加1
          const day = dateObject.getDate();
          // 将月份和日期格式化为字符串
          const MonthDate = `${month}-${day}`;
          this.middleDays.push(MonthDate);
          this.Monday = this.middleDays[0];
          this.Tuesday = this.middleDays[1];
          this.Wednesday = this.middleDays[2];
          this.Thursday = this.middleDays[3];
          this.Friday = this.middleDays[4];
          this.Saturday = this.middleDays[5];
          this.Sunday = this.middleDays[6];
        }
        this.getfindMiaoShu();
      },
      getDateWeek() {
        const now = new Date();
        const nowTime = now.getTime();
        const day = now.getDay();
        const oneDayTime = 24 * 60 * 60 * 1000;
        const mondayTime = nowTime - (day - 2) * oneDayTime;//默认是周二
        this.middleDays = new Date(mondayTime);
        this.newDateWeekHandle();
      },
      //默认选择这个星期的日期
      updateWeekRange() {
        debugger
        const now = new Date();
        const nowTime = now.getTime();
        const day = now.getDay();
        const oneDayTime = 24 * 60 * 60 * 1000;
        const mondayTime = nowTime - (day - 1) * oneDayTime;
        const sundayTime = nowTime + (7 - day) * oneDayTime;
        this.startDate = this.$moment(mondayTime).format('YYYY-MM-DD');
        this.endDate = this.$moment(sundayTime).format('YYYY-MM-DD');

        const startDate = new Date(this.startDate);
        const endDate = new Date(this.endDate);
        // 计算两个日期之间的毫秒差
        const timeDiff = endDate.getTime() - startDate.getTime();
        // 将毫秒差转换为天数
        const daysDiff = timeDiff / (1000 * 3600 * 24);
        this.middleDays = [];
        // 循环计算每一天的日期
        for (let i = 0; i <= daysDiff; i++) {
          //要把这个日期显示在星期上
          const currentDate = new Date(startDate.getTime() + i * 24 * 3600 * 1000);
          const formattedDate = currentDate.toISOString().split('T')[0];
          const dateObject = new Date(formattedDate);
          // 获取月份和日期
          const month = dateObject.getMonth() + 1; // 月份是从0开始计数，所以要加1
          const day = dateObject.getDate();
          // 将月份和日期格式化为字符串
          const MonthDate = `${month}-${day}`;
          this.middleDays.push(MonthDate);
          this.Monday = this.middleDays[0];
          this.Tuesday = this.middleDays[1];
          this.Wednesday = this.middleDays[2];
          this.Thursday = this.middleDays[3];
          this.Friday = this.middleDays[4];
          this.Saturday = this.middleDays[5];
          this.Sunday = this.middleDays[6];
        }
        this.getfindMiaoShu();
      },
      //查询所有描述
      getfindMiaoShu() {
        findListMiaosu().then(response => {
            this.MiaoShu = response.data;
          }
        );
      },
      //查询描述
      openDialog(row, session, monday) {
        if (monday == "" || monday == null) {
          this.dialogVisibler = true;
          return null;
        }
        this.input = '';
        this.curriculumMiaosu = {
          sessionsId: session,
          classId: row,
          modeTime: monday
        };
        findMiaosu(this.curriculumMiaosu).then(resp => {
          this.Miao = resp.data;
        })
        if (this.Miao != null) {
          this.Miao
        }
        this.getfindMiaoShu();
        this.dialogVisible = true
      },
      addMiao() {
        this.curriculumMiaosu.introduce = this.input
        addMiaoshu(this.curriculumMiaosu).then(resp => {
          if (resp.code === 200) {
            this.msgSuccess("成功");
            this.Miao = [];
            this.dialogVisible = false;
            this.getfindMiaoShu();
          }
        })
      }
    }
  };
</script>

<style scoped lang="scss">
  input{
    boder:0px;
  }
  .curriculumTable{

  }
  /deep/ .curriculumTable .cell {
    line-height: 26px;
    padding-left: 0px;
    padding-right: 0px;
  }
  /deep/ .curriculumTable .el-table__body td{
    padding: 0px 0px;
  }

</style>
